<template>
  <div
    v-loading="loading"
    class="app-container"
    :element-loading-text="loadingText"
  >
    <el-form ref="queryForm" label-width="88px">
      <el-form-item label="挂号单ID" prop="regId">
        <el-input
          v-model="regId"
          clearable
          size="small"
          style="width: 300px"
        />
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">读取IC卡</el-button>
      </el-form-item>
    </el-form>
    <!--病例信息开始  -->
    <el-card style="margin-bottom: 8px" v-if="found.dct_charge_id!=undefined">
      <el-form label-position="left"  label-width="120px" inline class="demo-table-expand">
        <el-form-item label="挂号单号:">
          <span v-text="found.dct_order_id" />
        </el-form-item>
        <el-form-item label="医生姓名:">
          <span v-text="found.dct_doctor_name" />
        </el-form-item>
        <el-form-item label="科室名称:">
          <span v-text="found.dct_office_name" />
        </el-form-item>
        <el-form-item label="患者姓名:">
          <span v-text="found.dct_patient_name" />
        </el-form-item>
        <el-form-item label="就诊时间:">
          <span v-text="found.dct_time" />
        </el-form-item>
        <el-form-item label="主诉:">
          <span v-text="found.dct_main" />
        </el-form-item>
        <el-form-item label="诊断信息:">
          <span v-text="1" />
        </el-form-item>
        <el-form-item label="医生建议:">
          <span v-text="found.dct_doctor_advice" />
        </el-form-item>
      </el-form>
    </el-card>

    <!--病例信息结束  -->
    <!--工具按钮开始  -->
    <el-card style="margin-bottom: 8px" v-if="found.dct_charge_id!=undefined">
      <el-row :gutter="5">
        <el-col :span="24">
          <el-button type="success"  icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
          <el-button type="warning" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
          <el-button type="primary" icon="el-icon-bank-card" @click="handlePayWithCash">现金支付</el-button>
          <el-button type="danger" icon="el-icon-bank-card" @click="handlePayWithZfb">支付宝支付</el-button>
          <span style="margin-left:500px">订单总额:<span style="color:red;margin-left:20px">￥:{{ medicineAmount+prescriptionAmount }}</span></span>
        </el-col>
      </el-row>
    </el-card>

<!--    <el-card style="margin-bottom: 8px" v-if="found.dct_charge_id!=undefined">-->
<!--      <el-collapse v-if="careOrders.length>0" v-model="activeNames">-->
<!--        <el-collapse-item v-for="(item,index) in careOrders" :key="index" :name="index"  >-->
<!--          <template slot="title" >-->
<!--            【{{ item.dct_prescription_type=='1'?'药用处方':'检查处方' }}】【{{ index+1 }}】【处方总额】:￥{{ item.dct_prescription_cost }}-->
<!--          </template>-->
<!--          <el-button type="primary" icon="el-icon-search" size="mini" @click="search(item.dct_prescription_type)">查询</el-button>-->
<!--          <el-table-->
<!--            ref="refTable"-->
<!--            v-loading="loading"-->
<!--            border-->
<!--            :data="search(item.dct_prescription_type)"-->
<!--            @selection-change="handleCareOrderItemSelectionChange($event,item.dct_prescription_type)"-->
<!--          >-->
<!--            <el-table-column type="selection" width="55" align="center" />-->
<!--            <el-table-column label="序号" align="center" type="index" width="50" />-->
<!--            <el-table-column :label="item.dct_prescription_type=='1'?'药品名称':'项目名称'" align="center" prop="dct_prescription_name" />-->
<!--            <el-table-column label="数量" align="center" key="dct_prescription_type" prop="dct_prescription_type" />-->
<!--            <el-table-column label="单价(元)" align="center" key="dct_prescription_single_price" prop="dct_prescription_single_price" />-->
<!--            <el-table-column label="金额(元)" align="center" prop="dct_prescription_cost" />-->
<!--            <el-table-column label="备注" align="center" prop="dct_remark" />-->
<!--            <el-table-column label="状态" align="center"  prop="dct_cost_status" />-->
<!--          </el-table>-->
<!--        </el-collapse-item>-->
<!--      </el-collapse>-->
<!--    </el-card>-->

    <el-card style="margin-bottom: 8px" v-if="found.dct_charge_id!=undefined">
      <el-collapse v-if="careOrders.length>0" v-model="activeNames">
        <el-collapse-item>
          <template slot="title" >
            【{{'药用处方'}}】【{{ 1 }}】【处方总额】:￥{{medicineAmount}}
          </template>
          <el-table
            ref="refTable1"
            v-loading="loading"
            border
            :data="type"
            :row-class-name="tableRowClassName"
            @selection-change="medicine($event,type.dct_charge_id)"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" align="center" type="index" width="50" />
            <el-table-column label="药品名称" align="center" prop="dct_prescription_name" />
            <el-table-column label="数量" align="center" key="dct_prescription_num" prop="dct_prescription_num" />
            <el-table-column label="单价(元)" align="center" key="dct_prescription_single_price" prop="dct_prescription_single_price" />
            <el-table-column label="金额(元)" align="center" prop="dct_prescription_cost" />
            <el-table-column label="备注" align="center" prop="dct_remark" />
            <el-table-column label="状态" align="center" >未支付</el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <el-card style="margin-bottom: 8px" v-if="found.dct_charge_id!=undefined">
      <el-collapse v-if="careOrders.length>0" v-model="activeNames">
        <el-collapse-item>
      <template slot="title" >
        【{{'检查处方'}}】【{{ 2 }}】【处方总额】:￥{{prescriptionAmount}}
      </template>
      <el-table
        ref="refTable2"
        v-loading="loading"
        border
        :data="num"
        :row-class-name="tableRowClassName"
        @selection-change="prescription($event,num.dct_charge_id)"

      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="项目名称" align="center" prop="dct_prescription_name" />
        <el-table-column label="数量" align="center" key="dct_prescription_num" prop="dct_prescription_num" />
        <el-table-column label="单价(元)" align="center" key="dct_prescription_single_price" prop="dct_prescription_single_price" />
        <el-table-column label="金额(元)" align="center" prop="dct_prescription_cost" />
        <el-table-column label="备注" align="center" prop="dct_remark" />
        <el-table-column label="状态" align="center" >未支付</el-table-column>
      </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <!--工具按钮结束  -->
    <!--处方信息开始  -->
    <!--处方信息结束  -->
  </div>


</template>

<script>
  import { selectID,selectNum,selectCost,selectOne,update,updateCash,updateWeb,
    createOrderChargeWithCash,
    createOrderChargeWithZfb,
    queryOrderChargeOrderId } from
      '@/api/cltmanage/charge.js'

  export default {
    name: "Role",
    data() {
      return {
        // 遮罩层
        loading: false,
        //设置遮罩层的文字
        loadingText: '',
        //用户输入的挂号单号
        regId:undefined,
        //病例对象
        found: {},
        //处方信息
        careOrders: null,

        type:null,

        // 处方详情的状态字典：
        statusOptions: [],
        //当前选中的订单总额
        medicineAmount : 0.00,

        prescriptionAmount:0.00,

        allAmount:0.00,
        //当前选中的所有项目的集合
        itemObjs: [],
        //展开的所有面板的名字
        activeNames : [],

        status :null,

        num:null,

        idsp:null,
        idsm:null,

        allData:null,

      }
    },
    created() {
      //加载状态的字典数据


    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        row.index = rowIndex
      },
      handleQuery(){
        this.loading= true
        this.loadingText="数据查询中请稍后"
        if(this.regId===''){
          this.msgError('请输入挂号单号')
          return
        }
        this.careOrders =[]
        this.loading = true
        this.loadingText='数据查询中请稍后...'
        selectOne().then(res =>{
          this.careOrders=res.data
        })
        selectNum(1,this.regId).then(response=>{
          this.type=response.data
        })
        selectNum(2,this.regId).then(response=>{
          this.num=response.data
        })

        selectID(this.regId).then(res => {
          this.found = res.data[0]
          this.allData=res.data
          this.status = (res.data.dct_cost_status==1?'已支付':'未支付')
          // this.careOrders = res.data.careOrders
          this.loading = false
          this.loadingText = ''
          // this.careOrders.filter((c,index) => {
          //   this.activeNames.push(index)
          // })
        }).catch(() => {
          this.msgError('查询失败')
          this.loading = false
          this.loadingText = ''
        })
      },
      //处方状态
      statusFormatter(row){
        if (row=='0'){
          this.status='未支付'
        }else{
          this.status='已支付'
        }
      },
      //监听多个表格的checkbox选中事件
      prescription(selection,coId) {
        this.idsp = selection.map(item => item.dct_charge_id)
        if (this.itemObjs.length === 0){
          this.itemObjs = selection
        }else {
           this.itemObjs=[];
          for (let i = 0 ; i < this.found.length; i++){
            const obj = this.itemObjs[i]
            if (obj.dct_prescription_type == coId){
              this.itemObjs.splice(i,1)
              i--
            }
          }
          //最后再来添加
          selection.filter(newItem => {
            this.itemObjs.push(newItem)
          })
        }
        this.prescriptionAllAmount()
      },
      prescriptionAllAmount(
      ){
        this.prescriptionAmount = 0
        this.itemObjs.filter(item=>{
          this.prescriptionAmount+=item.dct_prescription_cost
          this.allAmount = this.medicineAmount + this.prescriptionAmount
        })
      },
      medicine(selection,coId) {
        this.idsm = selection.map(item => item.dct_charge_id)
        if (this.itemObjs.length === 0){
          this.itemObjs = selection
        }else {
          this.itemObjs=[];
          for (let i = 0 ; i < this.found.length; i++){
            const obj = this.itemObjs[i]
            if (obj.dct_prescription_type == coId){
              this.itemObjs.splice(i,1)
              i--
            }
          }
          //最后再来添加
          selection.filter(newItem => {
            this.itemObjs.push(newItem)
          })
        }
        this.medicineAllAmount()
      },
      medicineAllAmount(
      ){
        this.medicineAmount = 0

        this.itemObjs.filter(item=>{
          this.medicineAmount+=item.dct_prescription_cost
          this.allAmount = this.medicineAmount + this.prescriptionAmount
        })
      },
      //全选
      handleSelectAll(){// 先取消再反选择
        const tables1 = this.$refs.refTable1
        const tables2 = this.$refs.refTable2
        tables1.clearSelection(),
        tables1.toggleAllSelection()
        tables2.clearSelection(),
        tables2.toggleAllSelection()
        },
      //取消全选
      handleUnSelectAll(){
        const tables1 = this.$refs.refTable1
        const tables2 = this.$refs.refTable2
        tables1.clearSelection(),
        tables2.clearSelection(),
        this.allAmount=0
      },
      //现金
      handlePayWithCash(row){
        if (this.allAmount!=0){
          const postIdp = row.dct_charge_id || this.idsp;
          const postIdm = row.dct_charge_id || this.idsm;
          this.$confirm('是否确认现金支付金额为'+this.allAmount ,'提示',{
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            if (postIdp!=0&&postIdp!=''&&postIdp!=null){
              updateCash(postIdp);
            }
            if(postIdm!=0&&postIdm!=''&&postIdm!=null){
              updateCash(postIdm);
            }
          }).then(()=>{
            this.handleQuery();
            this.medicineAmount=0,
              this.prescriptionAmount=0,
              this.msgSuccess("修改成功")
          })
        }else{
          this.msgError('请选择支付款项')
        }

      },
      //支付宝
      handlePayWithZfb(row){
        if (this.allAmount!=0){
          const postIdp = row.dct_charge_id || this.idsp;
          const postIdm = row.dct_charge_id || this.idsm;
          // this.$alert("<strong><img src='post.jpg' width='100px' height='100px'/></strong>" ,"请扫描二维码支付",{
          //
          // });
          this.$confirm("<strong><img src='ruoyi-ui/src/views/cltmanage/static/post.jpg'  width='100px' height='100px'/></strong>" ,'是否确认支付宝支付金额为'+this.allAmount+"",{
            dangerouslyUseHTMLString: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center:true,

          }).then(function () {
            if (postIdp!=0&&postIdp!=''&&postIdp!=null){
              updateWeb(postIdp);
            }
            if(postIdm!=0&&postIdm!=''&&postIdm!=null){
              updateWeb(postIdm);
            }
          }).then(()=>{
            this.handleQuery();
            this.medicineAmount=0,
              this.prescriptionAmount=0,
              this.msgSuccess("修改成功")
          })
        }else {
          this.msgError('请选择支付款项')
        }

      },

    }
  }
</script>
<style scoped>
  .demo-table-expand{
    font-size: 0;
  }
  .demo-table-expand label{
    width: 90px;
    color: white;
  }
  .demo-table-expand .el-form-item{
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
